<template>
  <div class="page-wrapper">
    <div class="wrapper">
      <a-flex :style="{ height: '130px', lineHeight: 1, color: '#ffffff' }" vertical justify="center" align="center">
        <a-flex :style="{ marginBottom: '12px' }" align="center">
          <span :style="{ fontSize: '29px', padding: '0 6px' }">106</span>
          <span :style="{ fontSize: '16px' }">股</span>
        </a-flex>
        <span :style="{ fontSize: '13px', lineHeight: '18px' }">≈10600.00元</span>
      </a-flex>
      <a-flex class="module-wrapper valuation-trend-wrapper" vertical align="center">
        <span :style="{ fontSize: '14px', fontWeight: 'bolder', lineHeight: '20px', marginBottom: '16px' }">估值走势图</span>
        <span :style="{ fontSize: '12px', lineHeight: '17px', marginBottom: '30px' }">随着工币价值不断提高，兑换工币所需金币数将逐渐增加</span>
        <a-flex :style="{ width: '100%', fontSize: '10px', lineHeight: '14px' }" justify="space-between">
          <span>
            <span>今日价格：</span>
            <span :style="{ color: '#FD436A' }">1 洽股=5.9778元</span>
          </span>
          <span>
            <span>令日涨幅：</span>
            <span :style="{ color: '#FD436A' }">+0.23%</span>
          </span>
        </a-flex>
        <div ref="valuationTrendChartRef" :style="{ width: '-webkit-fill-available', height: '200px' }"></div>
        <!-- <LineMulti
          :chartData="valuationTrendChart.chartData"
          :option="valuationTrendChart.chartOptions"
          width="-webkit-fill-available"
          height="200px"
        ></LineMulti> -->
        <span :style="{ fontSize: '10px', color: '#979797', lineHeight: '14px' }">*数据仅展示最近7天</span>
      </a-flex>
      <a-flex class="module-wrapper equity-distribution-wrapper" vertical align="center">
        <span :style="{ fontSize: '14px', fontWeight: 'bolder', lineHeight: '20px', marginBottom: '12px' }">股权分布</span>
        <span :style="{ fontSize: '12px', lineHeight: '17px', marginBottom: '30px' }">工币发行1000万，初始兑换定价为1元</span>
        <div ref="equityDistributionChartRef" :style="{ width: '-webkit-fill-available', height: '135px' }"></div>
        <!-- <Pie
          :chartData="equityDistributionChart.chartData"
          :option="equityDistributionChart.chartOptions"
          width="-webkit-fill-available"
          height="135px"
        ></Pie> -->
      </a-flex>
      <a-flex class="module-wrapper work-coin-rights-wrapper" vertical align="center">
        <span :style="{ fontSize: '14px', fontWeight: 'bolder', lineHeight: '20px', marginBottom: '12px' }">工币权益</span>
        <span :style="{ fontSize: '12px', lineHeight: '17px', marginBottom: '30px' }">工币市平台股份唯一确认积分，持有工币享有多种权益</span>
        <a-flex :style="{ width: '100%' }" justify="space-between">
          <a-flex
            v-for="(item, index) in workIconRights.listData"
            :key="index"
            :style="{ width: 100 / workIconRights.listData.length + '%' }"
            vertical
            align="center"
          >
            <img :src="item.icon" width="34px" height="34px" alt="" :style="{ marginBottom: '12px' }" />
            <span :style="{ fontSize: '12px', lineHeight: '20px' }">{{ item.label }}</span>
          </a-flex>
        </a-flex>
      </a-flex>
      <div :style="{ height: '10px' }"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useECharts } from '/@/hooks/web/useECharts';
  import { ref, reactive, watchEffect, Ref } from 'vue';
  // import LineMulti from '/@/components/chart/LineMulti.vue';
  // import Pie from '/@/components/chart/Pie.vue';

  import IconPlatformDividend from '/@/assets/images/h5/icon-platform-dividend.png';
  import IconRegularRepurchase from '/@/assets/images/h5/icon-regular-repurchase.png';
  import IconEquityExchange from '/@/assets/images/h5/icon-equity-exchange.png';
  import IconAppreciationRights from '/@/assets/images/h5/icon-appreciation-rights.png';
  import IconRedPacketTransfer from '/@/assets/images/h5/icon-red-packet-transfer.png';

  const valuationTrendChartRef = ref<HTMLDivElement | null>(null);
  const valuationTrendChart = useECharts(valuationTrendChartRef as Ref<HTMLDivElement>);
  const valuationTrendData = reactive([5.8725, 5.916, 5.9444, 5.948, 5.9593, 5.9641, 5.9778]);

  const equityDistributionChartRef = ref<HTMLDivElement | null>(null);
  const equityDistributionChart = useECharts(equityDistributionChartRef as Ref<HTMLDivElement>);
  const equityDistributionData = reactive([
    { name: '用户持股', value: 9376, color: '#FD436A' },
    { name: '平台持股', value: 6226, color: '#EC7600' },
  ]);
  watchEffect(() => {
    initValuationTrendChart();
    initEquityDistributionChart();
  });

  function initValuationTrendChart() {
    const options = {
      grid: {
        top: 40,
        bottom: 30,
        right: 10,
      },
      xAxis: {
        type: 'category',
        interval: 0,
        axisLine: {
          lineStyle: {
            color: '#B7B7B7',
          },
        },
        axisLabel: {
          fontSize: 10,
          color: '#3D3D3D',
        },
        axisTick: { show: false },
        data: valuationTrendData.map((_, i) => {
          const targetDate = new Date();
          targetDate.setDate(new Date().getDate() - valuationTrendData.length + i + 1);
          return targetDate
            .toLocaleDateString()
            .split('/')
            .slice(1)
            .map(($) => $.padStart(2, '0'))
            .join('.');
        }),
      },
      yAxis: {
        type: 'value',
        min: (p) => Math.floor(p.min * 100) / 100,
        max: (p) => Math.ceil(p.max * 100) / 100,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#B7B7B7',
          },
        },
        axisLabel: {
          fontSize: 10,
          color: '#3D3D3D',
        },
        splitLine: {
          opacity: 0.5,
        },
      },
      label: {
        show: true,
        fontSize: 10,
        fontWeight: 'bold',
        color: '#3D3D3D',
      },
      series: {
        type: 'line',
        symbol: 'circle',
        color: '#FD436A',
        data: valuationTrendData,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#FD436A',
              },
              {
                offset: 1,
                color: '#FD436A00',
              },
            ],
          },
        },
      },
    };
    valuationTrendChart.setOptions(options);
  }

  function initEquityDistributionChart() {
    const total = equityDistributionData.reduce((cur, item) => cur + item.value, 0) / 10;
    const chartData: any[] = [];
    const legendData: any[] = [];
    equityDistributionData.forEach((item) => {
      const name = item.name + '(' + ((item.value / total) * 10).toFixed(0) + '%)';
      chartData.push({
        name,
        value: item.value,
        itemStyle: { color: item.color },
      });
      chartData.push({
        value: total / equityDistributionData.length,
        itemStyle: { color: '#ffffff00' },
      });
      legendData.push({ name });
    });
    const options = {
      legend: {
        left: '60%',
        top: 10,
        data: legendData,
      },
      series: [
        {
          type: 'pie',
          radius: ['50%', '100%'],
          center: ['30%', '50%'],
          data: [{ value: 1, itemStyle: { color: '#eeeeee' } }],
          label: { show: false },
        },
        {
          type: 'pie',
          clockwise: false,
          radius: ['60%', '90%'],
          center: ['30%', '50%'],
          data: chartData,
          label: { show: false },
        },
      ],
    };
    equityDistributionChart.setOptions(options);
  }

  const workIconRights = {
    listData: [
      {
        label: '平台分红',
        icon: IconPlatformDividend,
      },
      {
        label: '定期回购',
        icon: IconRegularRepurchase,
      },
      {
        label: '股权兑换',
        icon: IconEquityExchange,
      },
      {
        label: '增值权益',
        icon: IconAppreciationRights,
      },
      {
        label: '红包转账',
        icon: IconRedPacketTransfer,
      },
    ],
  };
</script>

<style scoped lang="less">
  .page-wrapper {
    height: 100%;
    overflow-y: auto;
  }
  .page-wrapper::-webkit-scrollbar {
    display: none;
  }
  .wrapper {
    min-height: 100%;
    background-image: url(/@/assets/images/h5/bg-workCoinMine.png);
    background-size: 100% auto;
    background-position: 0 -88px;
    background-repeat: no-repeat;
  }
  .module-wrapper {
    border-radius: 10px;
    margin: 0 12px 16px;
    background-color: #ffffff;
    padding: 16px 20px 10px;
    color: #000000;
  }
  .valuation-trend-wrapper {
    padding-bottom: 10px;
  }
  .equity-distribution-wrapper {
  }
  .work-coin-rights-wrapper {
  }
</style>
